<template>
	<view class="">
		<el-dialog :visible.sync="show1" width="80%" @close="handleClose" zIndex="100" top="10px">



			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">商品名：</view>
				<el-input placeholder="请输入商品名" v-model="params.goodsName" size="mini" />
			</view>


			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex u-flex-1 u-row-right">
					<view style="width: 140rpx;">商品分类：</view>
					<el-select v-model="params.goodClassId" placeholder="请选择商品分类" size="mini" style="width: 100%;">
						<el-option v-for="item in classes" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
					<!-- <el-input v-model="params.classDesc" placeholder="请选择商品分类" size="mini" style="width: 120px;" />
			<picker :range="classes" range-key="label" @change="changeClass">
				<text style="margin-left: 20rpx;" class="u-type-primary">选择商品分类</text>
			</picker> -->
				</view>
			</view>
			
			<view class="display_flex" style="margin-bottom: 20rpx;">
				<view style="width: 130rpx;">关联小店商品Id：</view>
				<el-input placeholder="关联小店商品" v-model="params.productId" size="mini" />
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex">
					<view style="width: 150rpx;">最低价格：</view>
					<el-input placeholder="请输入最低价格" v-model="params.minPrice" size="mini" type="number" />
				</view>

				<view class="display_flex">
					<view style="width: 150rpx;">最大价格：</view>
					<el-input placeholder="请输入最低价格" v-model="params.maxPrice" size="mini" type="number" />
				</view>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view>是否是精选商品：</view>
				<el-switch v-model="params.isNice"></el-switch>
			</view>

			<view class="display_flex_bet u-m-b-20">
				<view class="display_flex" style="margin-bottom: 20rpx;">
					<view style="width: 130rpx;">标签：</view>
					<view class="display_flex" style="width: calc(100% - 130rpx);">
						<view v-for="(item,index) in params.tags" class="u-m-r-10 u-border display_flex u-p-6 u-font-12">
							<input placeholder="请输入标签" size="mini" @input="inputVlaue($event,index)" :value="item" />
							<i class=" el-icon-remove-outline u-m-r-20 u-font-16" @click="params.tags.splice(index,1)"
								v-if="index != 0" />
							<i class="el-icon-plus u-font-16" @click="params.tags.push('')" />
						</view>
					</view>
				</view>
			</view>


			<view class="display_flex">
				<view style="width: 200rpx;">是否上架：</view>
				<el-radio-group v-model="params.status" size="mini">
					<el-radio-button :label="1">已上架</el-radio-button>
					<el-radio-button :label="-1">未上架</el-radio-button>
				</el-radio-group>
			</view>


			<view class="u-flex">
				<uploadImg :canSetHeader="true" @upload="(images)=>{params.subGoodIcons = images}"
					@remove="(images)=>{params.subGoodIcons = images}" :Images="params.subGoodIcons" title="商品图"
					@setHeader="(images)=>{params.subGoodIcons = images}" :artPptNum="params.goodsName" />
			</view>

			<span slot="footer" class="dialog-footer">
				<el-button @click="handleClose" size="mini">取 消</el-button>
				<el-button type="primary" @click="confirmAdd" size="mini">确 定</el-button>
			</span>
		</el-dialog>
	</view>
</template>

<script>
	var COS = require('cos-nodejs-sdk-v5');
	import chooseFile from '@/js_sdk/tencentcloud/choose-file.js';
	import uploadFile from '@/js_sdk/tencentcloud/upload-file.js';
	import getFileAccessUrl from '@/js_sdk/tencentcloud/getFileAccessUrl';

	let that
	export default {
		components: {},
		props: {
			detail: {
				type: Object,
				default: {}
			},
			classDesc: {
				type: String,
				default: "课件"
			}
		},

		data() {
			return {
				show1: true,
				getTypes: ["广告", "付费"],
				myConfig: {
					// 编辑器不自动被内容撑高
					autoHeightEnabled: false,
					// 初始容器高度
					initialFrameHeight: 240,
					// 初始容器宽度
					initialFrameWidth: '100%',
				},
				params: {
					goodsName:'',
					minPrice:0,
					maxPrice:'',
					goodClassId:'',
					
					subGoodIcons:[],
					tags:[""],
					status:1,
					productId:''
				},
				classes: [],
				optionsNianLing: [],

				typeOptions: [],
				optionTypes: [{
					value: '单个',
					label: '单个'
				}, {
					value: '合集',
					label: '合集'
				}],
				fileTypeList: ["课件", "素材"],
				artPPTCourse: [],
			}
		},

		mounted() {
			that = this

			var cos = new COS({
				SecretId: "AKIDuc5GAnAG5duuHQJwHL8fusZz80bvykFT", // 推荐使用环境变量获取；用户的 SecretId，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
				SecretKey: "zh8IAm7BxSgdJhpgFXZJmzvd5HDrEK9g", // 推荐使用环境变量获取；用户的 SecretKey，建议使用子账号密钥，授权遵循最小权限指引，降低使用风险。子账号密钥获取可参考https://cloud.tencent.com/document/product/598/37140
			});

			for (let i = 3; i <= 30; i++) {
				let item = {
					label: i,
					value: i
				}
				that.optionsNianLing.push(item)
			}

			if (that.detail && that.detail.objectId) {
				that.params = JSON.parse(JSON.stringify(that.detail))
			}


			that.classes = []
			that.common.rightApi("admin/goodClass/list", {}).then(res => {
				let classList = res.data
				for (let item of classList) {
					let optionItem = {
						value: item.objectId,
						label: item.name
					}
					that.classes.push(optionItem)
				}
			})
		},

		methods: {

			handleClose() {
				this.$emit("close", true)
			},

			inputVlaue(e, index) {
				that.params.tags[index] = e.detail.value
			},

			confirmAdd() {
				this.params.isAdmin = true
				this.$http.Post("admin/good/save ", this.params).then(res => {
					this.$emit("save", true)
				})
			},

			change(limit) {
				var size = "";
				if (limit < 0.5 * 1024) { //小于0.1KB，则转化成B
					size = limit.toFixed(2) + "B"
				} else if (limit < 0.5 * 1024 * 1024) { //小于0.1MB，则转化成KB
					size = (limit / 1024).toFixed(2) + "KB"
				} else if (limit < 0.5 * 1024 * 1024 * 1024) { //小于0.2GB，则转化成MB
					size = (limit / (1024 * 1024)).toFixed(2) + "MB"
				} else { //其他转化成GB
					size = (limit / (1024 * 1024 * 1024)).toFixed(2) + "GB"
				}

				var sizeStr = size + ""; //转成字符串
				var index = sizeStr.indexOf("."); //获取小数点处的索引
				var dou = sizeStr.substr(index + 1, 2) //获取小数点后两位的值
				if (dou == "00") { //判断后两位是否为00，如果是则删除00                
					return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
				}
				return size;
			},


		}
	}
</script>

<style>
	.display_flex {
		display: flex;
		align-items: center;
	}
</style>